<template>
  <div class="module">
    <template v-if="level == 3">
      <div class="left-content">
        <Transition name="slide-left" mode="out-in">
          <div class="box-left">
            <MineOverview @mineDetailsShow="mineDetailsShow"></MineOverview>
            <MineMonitor @mineMonitorShow="mineMonitorShow"></MineMonitor>
            <mine-tree-card ref="mineTreeRef"></mine-tree-card>
          </div>
        </Transition>
      </div>
      <div class="center">
        <div class="center-top">
          <div class="center-top-left"></div>
          <div class="right"></div>
        </div>
      </div>
      <div class="right-content">
        <Transition name="slide-right" mode="out-in">
          <div class="box-right" v-if="volumeVisible">
            <ReservesOverview></ReservesOverview>
            <EcologyProject></EcologyProject>
            <WarningOverview></WarningOverview>
          </div>
        </Transition>
      </div>
    </template>
    <template v-else-if="level == 4">
      <div class="menu-top">
        <div class="menu-left">
          <div v-for="(menu, index) in topLeftMenu" :key="index" class="menu-div"
            :class="menu.show ? 'menu-choice' : ''" @click="choiceMenu(menu)">{{ menu.label }}</div>
        </div>
        <div class="menu-right">
          <div title="土地利用" class="menu-btn" :class="contentTitle == '土地利用' ? 'areaBgActice' : 'areaBg'"
            @click="choiceMenuBtn('土地利用')"></div>
          <div title="三维模型" class="menu-btn" :class="contentTitle == '三维模型' ? 'modelBgActice' : 'modelBg'"
            @click="choiceMenuBtn('三维模型')"></div>
          <div title="卫星正射影像" class="menu-btn" :class="contentTitle == '卫星正射影像' ? 'sarBgActice' : 'sarBg'"
            @click="choiceMenuBtn('卫星正射影像')"></div>
          <div title="返回首页" class="menu-btn homeBg" @click="returnHome()"></div>
        </div>
      </div>
      <div class="mine-content">
        <mine-tree-card-child v-show="menuNow.id == 1 && menuNow.show"
          @closeMineTree="closeModel"></mine-tree-card-child>
        <EarlyWarningStatistics v-if="menuNow.id == 3 && menuNow.show" @closeWarning="closeModel">
        </EarlyWarningStatistics>
        <ReservesOverviewChild v-if="menuNow.id == 4 && menuNow.show" @closeReserves="closeModel">
        </ReservesOverviewChild>
        <EcologyProjectChild v-if="menuNow.id == 5 && menuNow.show" @closeEcology="closeModel"></EcologyProjectChild>
        <DeviceOperation v-if="menuNow.id == 6 && menuNow.show" @closeDevice="closeModel" :gnss="gnssList"
          :video="videoList" :dust="dustList"></DeviceOperation>
      </div>
      <div class="bottom-content" v-if="bottomShow">
        <div class="bottom-content-title">{{ contentTitle + '历史数据' }}</div>
        <div></div>
      </div>
      <Instrument @measureType="measureType"></Instrument>
    </template>
    <!-- 矿山概况弹框 -->
    <MineDetailsDialog ref="mineDetailsDialogRef"></MineDetailsDialog>
    <!-- 矿山监控弹窗(县以上) -->
    <MineMonitorDialog ref="mineMonitorDialogRef"></MineMonitorDialog>
    <!-- 矿山监控弹窗（矿） -->
    <MineChildMonitorDialog ref="mineChildMonitorDialogRef" @monitorClose="closeModel"></MineChildMonitorDialog>
  </div>
</template>

<script setup>
import { nextTick, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { emitter } from "@/utils/events";
import { getDeviceByMineNo, getConfigKey } from "@/api/situation";
import mapUtil from "./profile/map";
import measureUtils from "@/components/Instrument/measureUtils";
import MineTreeCard from "@/components/MineTreeCard/MineTreeCard"; // 矿山名录
import MineTreeCardChild from "@/components/MineTreeCard/MineTreeCardChild"; // 矿山名录
import MineOverview from "./modules/MineOverview" // 矿山概况
import MineMonitor from "./modules/MineMonitor" // 矿山详情
import ReservesOverview from "./modules/ReservesOverview" // 储量概况
import EcologyProject from "./modules/EcologyProject" // 生态工程
import WarningOverview from "./modules/WarningOverview" // 预警总览
import MineDetailsDialog from "./modules/MineDetailsDialog" // 矿山概况详情
import MineMonitorDialog from "./modules/MineMonitorDialog" // 矿山监控详情
import MineChildMonitorDialog from "@/components/MineMonitorDialog/MineChildMonitorDialog" // 矿山监控详情
import Instrument from "@/components/Instrument/Measure" // 测量工具
import EarlyWarningStatistics from "./modules/EarlyWarningStatistics" // 矿山预警总览
import EcologyProjectChild from "./modules/EcologyProjectChild" // 矿山生态工程详情
import ReservesOverviewChild from "./modules/ReservesOverviewChild" // 矿山储量概况
import DeviceOperation from "@/components/Device/DeviceOperation" // 设备概况
import useOnemapStore from "@/store/modules/onemap";
const { proxy } = getCurrentInstance();
const onemapStore = useOnemapStore();
const mineTreeRef = ref("")
const router = useRouter();
const volumeVisible = ref(true);
const level = ref(onemapStore.nodeLevel < 3 ? 3 : onemapStore.nodeLevel);
const topLeftMenu = ref([
  { id: 1, label: '矿山名录', show: false },
  { id: 2, label: '矿山监控', show: false },
  { id: 3, label: '预警统计', show: false },
  { id: 4, label: '储量概况', show: false },
  { id: 5, label: '生态工程', show: false },
  { id: 6, label: '设备概况', show: false },
  { id: 7, label: '边坡分区', show: false },
])
const menuNow = ref({ id: 1, label: '矿山名录', show: false })
const gnssList = ref([])
const videoList = ref([])
const dustList = ref([])
const contentTitle = ref('')
const bottomShow = ref(false)
const pm10T = ref(0);
const pm25T = ref(0);
const noiseT = ref(0);
// 监听地图是否加载完毕 mapOnload-当前页面路由name
let mapInstance, map3dUtil, instrumentUtil;
emitter.once("mapOnload", (map) => {
  mapInstance = map;
  map3dUtil = new mapUtil(mapInstance);
  instrumentUtil = new measureUtils(mapInstance)
  if (level.value == 3) {
    getDeviceAdd()
    getConfigKey("environment.threshold.pm25").then((res) => {
      pm10T.value = res.data;
    });
    getConfigKey("environment.threshold.pm10").then((res) => {
      pm25T.value = res.data;
    });
    getConfigKey("environment.threshold.noise").then((res) => {
      noiseT.value = res.data;
    });
  }
});

onActivated(() => {
  // 再次打开页面时在这里初始化地球中的内容
  console.log("综合态势组件被激活");
  proxy.$forceUpdate();
  getDeviceAdd()
});

onDeactivated(() => {
  // 在这里清除本页面地图中的的加载内容
  console.log("综合态势组件被停用");
  closeHistoryData()
  map3dUtil.clearSituationGroupLayer()
});

watch(
  () => onemapStore.nodeLevel,
  (newValue, oldValue) => {
    level.value = newValue;
  }
);

watch(
  () => onemapStore.currentOpenPitInfo.openPitNo,
  (newValue, oldValue) => {
    if (router.currentRoute.value.name == 'Situation') {
      // 监听到切换矿山
      closeHistoryData()
      setTimeout(() => {
        getDeviceAdd()
      }, 1000)
    }
  }
);

// 矿山概况弹框
function mineDetailsShow() {
  proxy.$refs["mineDetailsDialogRef"].show();
};
// 监控详情弹框
function mineMonitorShow() {
  proxy.$refs["mineMonitorDialogRef"].show();
};
// 矿山监控详情弹框
function mineChildMonitorShow() {
  proxy.$refs["mineChildMonitorDialogRef"].show();
}
// 测量工具
function measureType(value) {
  // map3dUtil.measureHandle(value)
  instrumentUtil.measureHandle(value)
}
// menu切换
function choiceMenu(menu) {
  switch (menu.id) {
    case 2: // 矿山监控
      mineChildMonitorShow()
      break;
    default:
      break;
  }
  topLeftMenu.value.forEach(item => {
    if (menu.id == item.id) {
      item.show = !menu.show
    } else {
      item.show = false
    }
  });
  menuNow.value = menu
}
// 关闭模态框
function closeModel(id) {
  if (menuNow.value.id == id) {
    menuNow.value.show = false
    topLeftMenu.value.forEach(item => {
      if (id == item.id) {
        item.show = false
      }
    });
  }
}
// 选中按钮
function choiceMenuBtn(value) {
  if (contentTitle.value == value) {
    bottomShow.value = false
    contentTitle.value = ''
  } else {
    bottomShow.value = true
    contentTitle.value = value
  }
}
// 关闭历史数据
function closeHistoryData() {
  bottomShow.value = false
  contentTitle.value = ''
}
// 返回首页
function returnHome() {
  topLeftMenu.value.forEach(menu=>{
    menu.show = false
  })
  closeHistoryData()
  map3dUtil.clearSituationGroupLayer()
  level.value = 3

}
// 获取设备列表并加载
function getDeviceAdd() {
  const params = {
    openPitNo: onemapStore.currentOpenPitInfo.openPitNo,
    equipType: ['02', '132', '08'],
  }
  getDeviceByMineNo(params).then(res => {
    if (res.code == 200) {
      console.log("res", res.data)
      gnssList.value = []
      videoList.value = []
      dustList.value = []
      map3dUtil.claerDeviceLayer()
      res.data.forEach(item => {
        if (item.equipType == '02') {
          gnssList.value.push(item)
          map3dUtil.loadGnssData(item)
        } else if (item.equipType == '132') {
          videoList.value.push(item)
          map3dUtil.loadVideoData(item)
        } else {
          dustList.value.push(item)
          map3dUtil.loadDustData(item, pm10T.value, pm25T.value, noiseT.value)
        }
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.module {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 8px;
  position: relative;

  .img-height {
    height: 100%;
  }

  .left-content,
  .right-content {
    display: flex;
    transition: translate 1s;
    width: 400px;
    position: relative;
  }

  .yxbdbz {
    width: max-content;
    // transition: all 1s;
  }

  .box-left,
  .box-right {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 8px;
  }

  .box-volume {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }

  .right-measure {
    position: relative;
    width: 60px;
    margin-right: 5px;
    border-radius: 0px 0px 0px 0px;
    // border: 1px solid orange;
  }

  .center {
    flex: 1;
    margin: 0px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .angle-div {
      position: absolute;
      bottom: 119px;
      right: 44px;
      background: linear-gradient(to bottom,
          rgba(116, 117, 119, 0.8) 0%,
          rgba(58, 68, 82, 0.8) 11%,
          rgba(46, 50, 56, 0.8) 46%,
          rgba(53, 53, 53, 0.8) 81%,
          rgba(53, 53, 53, 0.8) 100%);
      text-align: right;
      width: 715px;
      height: 30px;
      line-height: 30px;
      padding-right: 2px;

      .el-button--small {
        height: 26px;
        pointer-events: all;
      }
    }

    &-top {
      // flex: 1;
      // border: 1px solid #186d8f;
      // border-radius: 8px;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      &-left {}

      &-right {}
    }

    &-bottom {
      margin-top: 24px;
      // border: 1px solid #186d8f;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .color-legen {
        position: absolute;
        bottom: 24px;
        right: -12px;
        height: 156px;
      }
    }
  }
}

.menu-top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;

  >div {
    height: 50px;
  }

  .menu-left {
    width: 70%;
    display: flex;
    align-items: center;
  }

  .menu-right {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 5px;
  }

  .menu-div {
    width: 110px;
    height: 34px;
    background-image: url('@/assets/images/green/menu-child.png');
    background-size: 100% 100%;
    margin-right: 20px;
    line-height: 34px;
    text-align: center;
    color: #eef1fa;
    font-family: PangMen;
    font-size: 16px;
    cursor: pointer;
  }

  .menu-div:active {
    scale: 0.9;
    background-image: url('@/assets/images/green/menu-child-active.png');
    background-size: 100% 100%;
  }

  .menu-choice {
    background-image: url('@/assets/images/green/menu-child-active.png');
    background-size: 100% 100%;
  }

  .menu-btn {
    height: 46px;
    width: 46px;
    cursor: pointer;
    margin-left: 20px;
  }

  .menu-btn:active {
    scale: 0.9;
  }

  .areaBg {
    background-image: url('@/assets/images/green/area.png');
    background-size: 100% 100%;
  }

  .modelBg {
    background-image: url('@/assets/images/green/model.png');
    background-size: 100% 100%;
  }

  .sarBg {
    background-image: url('@/assets/images/green/sar.png');
    background-size: 100% 100%;
  }

  .areaBgActice {
    background-image: url('@/assets/images/green/area-active.png');
    background-size: 100% 100%;
  }

  .modelBgActice {
    background-image: url('@/assets/images/green/model-active.png');
    background-size: 100% 100%;
  }

  .sarBgActice {
    background-image: url('@/assets/images/green/sar-active.png');
    background-size: 100% 100%;
  }

  .homeBg {
    background-image: url('@/assets/images/green/home-btn.png');
    background-size: 100% 100%;
  }
}

.mine-content {
  width: 370px;
  height: calc(100% - 100px);
  position: absolute;
  left: 8px;
  top: 60px;
}

.bottom-content {
  width: 900px;
  height: 140px;
  background-image: url('@/assets/images/green/historyBg.png');
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, -20%);
  pointer-events: all;

  .bottom-content-title {
    height: 28px;
    width: 300px;
    line-height: 30px;
    font-size: 20px;
    font-family: PangMen;
    color: #eef1fa;
    margin-left: 60px;
  }
}
</style>